<template>
    <div>
      <course-form  @sendsearch="search" :opt3="coursedata.opt3"  :opt2="coursedata.opt2"  :opt1="coursedata.opt1"></course-form>
      <course-table @sendpage="pagechange"  :count="coursedata.count" :listdata="coursedata.courseList"></course-table>
    </div>
</template>

<script lang="ts">
import courseForm from './courseForm.vue'
import courseTable from './courseTable.vue'
export default {
   components:{
     courseForm,
     courseTable
   }
}
</script>
<script lang="ts" setup>
     import {getCourseList} from '../../api/course'
    import {reactive} from 'vue'
      let coursedata=reactive({ 
        async  getCourse(){ //请求课程列表数据
           var res:any=await getCourseList({
             searchText:coursedata.searchText,
             pageStart:coursedata.pageStart,
             CategoryOne:coursedata.CategoryOne,
             CategoryTwo:coursedata.CategoryTwo,
             CategoryThree:coursedata.CategoryThree
           })
           console.log(res)
           if(!res.err){
              coursedata.courseList=res.data.list;
              coursedata.count=res.data.count;
           }
         },
         count:0,
         courseList:[],
        CategoryOne:"",
        CategoryTwo:"",
        CategoryThree:"",
        searchText:"",
        pageStart:1,
        opt1: [{
        value: "1",
        label: "前端"
        }, {
          value: "2",
          label: "后台"
        }, {
        value: "3",
        label: "视觉设计"
        }],
        opt2: [{
          value: "11",
          label: "JS"
        }, {
          value: "12",
          label: "Vue"
        }, {
        value: '13',
          label: "Webpack"
        },
        {
          value: "21",
          label: "Java"
        },
      {
        value: "22",
        label: "PHP"
      },
      {
        value: "22",
        label: "python"
      },
      {
        value: "31",
        label: "PS"
      },
      {
        value: "32",
        label: "蓝湖"
      },
      {
        value: "33",
        label: "Vi"
      }],
      opt3: [
        { value: "111", label: "js基础" },
        { value: "112", label: "js高级" }
      ]
      })
      coursedata.getCourse();
    // 搜索
      let search=(formdata:any)=>{
            coursedata.searchText=formdata.searchText;
            coursedata.CategoryOne=formdata.CategoryOne;
             coursedata.CategoryTwo=formdata.CategoryTwo;
            coursedata.CategoryThree=formdata.CategoryThree;
             coursedata.getCourse();
      }
      // 分页改变
      let pagechange=(page:number)=>{
          coursedata.pageStart=page;
            coursedata.getCourse();
      }
</script>
<style>

</style>